<script>
export default {
  props: {
    statusCode: {
      type: Number,
      default: 2,
    }
  },
  data() {
    return {
      isPassed: '审批已通过',
      nowTime: '',
    }
  },
  computed: {
    statusText() {
      switch (this.statusCode) {
        case 0:
          return '即将休假'
        case 1:
          return '休假中'
        case 2:
          return '已完成'
      }
    },
    backgroundColor() {
      switch (this.statusCode) {
        case 0:
          return 'background: linear-gradient(0deg,#F0AC46,#E5752F)'
        case 1:
          return 'background: linear-gradient(0deg,#63D580,#4BA55B)'
        case 2:
          return 'background: linear-gradient(0deg,#9ea7b4,#657180)'
      }
    }
  },
  methods: {
    checkModal() {
      this.$emit('checkModal')
    },
    getNowTime() {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hh = date.getHours()
      let mm = date.getMinutes()
      let ss = date.getSeconds()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      if (hh < 10) {
        hh = '0' + hh
      }
      if (mm < 10) {
        mm = '0' + mm
      }
      if (ss < 10) {
        ss = '0' + ss
      }
      this.nowTime = `当前时间:${year}-${month}-${day} ${hh}:${mm}:${ss}`
    }
  },
  mounted() {
    this.getNowTime()
    const interval = setInterval(() => this.getNowTime(), 1000)
  }
}
</script>

<template>
  <div class="container" :style="backgroundColor">
    <div class="personal-info" @click="checkModal">个人信息 ></div>
    <div class="status-container">
      <div style="display: flex; align-items: center;">
        <svg
          t="1631371105091"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3462"
          width="200"
          height="200"
        >
          <path
            d="M512.465455 0.116364C230.609455 0.116364 1.210182 229.492364 1.210182 511.371636S230.586182 1022.650182 512.465455 1022.650182s511.278545-229.376 511.278545-511.278546C1023.720727 229.492364 794.344727 0.116364 512.465455 0.116364z m286.091636 413.230545L466.013091 754.222545a42.519273 42.519273 0 0 1-30.254546 12.753455h-0.232727a42.589091 42.589091 0 0 1-30.114909-12.427636l-178.711273-178.827637a42.565818 42.565818 0 0 1 0-60.253091 42.565818 42.565818 0 0 1 60.253091 0l148.363637 148.247273 302.312727-310.062545a42.682182 42.682182 0 0 1 60.253091-0.698182 42.821818 42.821818 0 0 1 0.674909 60.392727z m0 0"
            p-id="3463"
          />
        </svg>
        <div class="is-passed">{{ isPassed }}</div>
      </div>
      <div class="status-text">{{ statusText }}</div>
    </div>
    <div class="progress-bar">
      <div class="now-time">{{ nowTime }}</div>
    </div>
  </div>
</template>

<style scoped>
.container {
  position: relative;
  height: 25vw;
  background-color: gray;
}
.personal-info {
  position: absolute;
  top: 2.66667vw;
  right: 5.33333vw;
  color: #fff;
  font-size: 3.73333vw;
  font-style: normal;
}
.status-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 9px 0;
}
.is-passed {
  margin-left: 1vw;
  font-size: 4.26667vw;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.53333vw;
  color: #fff;
}
.status-text {
  margin-top: 1.33333vw;
  font-size: 8.53333vw;
  font-style: normal;
  font-weight: 400;
  line-height: 8.53333vw;
  letter-spacing: 1.06667vw;
  color: #fff;
}
.progress-bar {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 4.26667vw;
  margin: 0 auto;
  background-image: linear-gradient(
    135deg,
    #fff,
    #fff 25%,
    transparent 0,
    transparent 50%,
    #fff 0,
    #fff 75%,
    transparent 0,
    transparent 0
  );
  background-size: 16vw 16vw;
  -webkit-animation: move 1s linear infinite;
  animation: move 1s linear infinite;
  align-items: center;
  justify-content: center;
}
@keyframes move {
  0% {
    color: inherit;
  }
  to {
    background-position: 16vw 0;
  }
}
.now-time {
  padding: 0 1.33333vw;
  font-size: 3.2vw;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1.86667vw;
}
.icon {
  fill: #fff;
  width: 4.4vw;
  height: 4.4vw;
  transform: translate(0, -0.35vw);
}
</style>